* {
    padding: 0;
    margin: 0;
}

html,body {
    height: 100%;
    width: 100%;
    /*min-width: 450px;*/
}

.flex-row {
    display: flex;

}

.justify-center {
    justify-content: center;
}

.container {
    height: 100%;
}
.header-title {
    /*vh view-height 即视图高度  15vh 即占据视图15%的高度*/
    height: 15vh;
    background: url("../images/01.jpg.png");
    /*图片位置为居中底部贴齐*/
    background-position: center bottom;
    /*不重复拼接图片*/
    background-repeat: no-repeat;
    /*让图片大小适应盒子宽高*/
    background-size: 100% 100%;
}

.content {
    height: 85vh;
    background: url("../images/index-bg.jpg.png");
    background-position: center center;
    /*不重复拼接图片*/
    background-repeat: no-repeat;
    /*让图片大小适应盒子宽高*/
    background-size: 100% 100%;
}
/*.center-bg {*/
/*    height: 85vh;*/
/*    width: 100%;*/
/*    background: url("../images/center.png.png");*/
/*    !*图片位置为居中底部贴齐*!*/
/*    background-position: center bottom;*/
/*    !*不重复拼接图片*!*/
/*    background-repeat: no-repeat;*/
/*    !*让图片大小适应盒子宽高*!*/
/*    background-size: 100% 100%;*/
/*    position: absolute;*/
/*}*/
.menu-list {
    height: 100%;
}
/*让所有的图片列分布并水平居中*/
.menu-items {
    display: flex;
    flex-direction: column;
    align-items: center;
    /*让items盒子浮于center-bg盒子上*/
    position: relative;
    top: 55%;
    transform: translateY(-50%);
}

.menu-list img {
    /*让图片宽高一致*/
    width: 10vh;
    height: 10vh;
}
.item-text {
    text-align: center;
}

.item-col-2 {
    width: 100%;
}


.item-col-3{
    position: relative;
    top: -40px;
}

.item-col-3 img{
    width: 15vh;
    height: 15vh;
}
.item-col-3 .item-text {
    position: relative;
    top: -50px;
}

.item-col-4 {
    width: 100%;
}
/*伪类选择器 多个menu-item情况下，选择第一个*/
.item-col-2 .menu-item:first-child{
    margin-right: 35%;
}
.item-col-4 .menu-item:first-child{
    margin-right: 35%;
}

.item-col-4,.item-col-5 {
    position: relative;
    top: -130px;
}





